<sqx-title message="i18n:common.subscription" />
<sqx-layout innerWidth="63" layout="main" titleIcon="subscription" titleText="i18n:common.subscription">
    <ng-container menu>
        <sqx-notifo topic="apps/{{ plansState.appId }}/settings/plan" />
        <button class="btn btn-text-secondary" (click)="reload()" shortcut="CTRL + B" title="i18n:plans.refreshTooltip" type="button">
            <i class="icon-reset"></i> {{ "common.refresh" | sqxTranslate }}
        </button>
    </ng-container>
    <ng-container>
        <sqx-list-view innerWidth="63rem" [isLoading]="plansState.isLoading | async">
            @if ((plansState.isLoaded | async) && (plansState.plans | async); as plans) {
                @if ((plansState.locked | async) === "NotOwner") {
                    <div class="alert alert-danger">
                        {{ "plans.notPlanOwner" | sqxTranslate }} {{ "plans.planOwner" | sqxTranslate }}:
                        <strong className="no-wrap">{{ plansState.planOwner | async | sqxUserName }}</strong>
                    </div>
                }

                @if ((plansState.locked | async) === "ManagedByTeam") {
                    <div class="alert alert-danger">{{ "plans.managedByTeam" | sqxTranslate }}</div>
                }

                @if (plansState.referral | async; as referral) {
                    <div class="card card-body mb-4">
                        <h5 class="card-title">Squidex Referal Program</h5>
                        <sqx-form-hint>
                            <div [sqxMarkdown]="'plans.referralHint' | sqxTranslate: referral"></div>

                            <div [sqxMarkdown]="referral.condition"></div>

                            <div [sqxMarkdown]="'plans.referralEarned' | sqxTranslate: referral"></div>
                        </sqx-form-hint>
                    </div>
                }

                <div>
                    <div class="plans">
                        @for (planInfo of plans; track planInfo.plan.id) {
                            <div class="plan"><sqx-plan [planInfo]="planInfo" /></div>
                        }
                    </div>

                    @if (plans.length === 0) {
                        <div class="text-muted text-center empty">{{ "plans.noPlanConfigured" | sqxTranslate }}</div>
                    }

                    @if (plansState.portalLink | async; as portalLink) {
                        <div class="billing-portal-link">
                            {{ "plans.billingPortalHint" | sqxTranslate }}
                            <a [href]="portalLink" sqxExternalLink>{{ "plans.billingPortal" | sqxTranslate }}</a>
                        </div>
                    }
                </div>
            }
        </sqx-list-view>
    </ng-container>
    <ng-template sidebarMenu>
        <div class="panel-nav">
            <a
                class="panel-link"
                attr.aria-label="{{ 'common.history' | sqxTranslate }}"
                queryParamsHandling="preserve"
                replaceUrl="true"
                routerLink="history"
                routerLinkActive="active"
                sqxTourStep="history"
                title="i18n:common.history"
                titlePosition="left">
                <i class="icon-time"></i>
            </a>
            <a
                class="panel-link"
                attr.aria-label="{{ 'common.help' | sqxTranslate }}"
                queryParamsHandling="preserve"
                replaceUrl="true"
                routerLink="help"
                routerLinkActive="active"
                sqxTourStep="help"
                title="i18n:common.help"
                titlePosition="left">
                <i class="icon-help2"></i>
            </a>
        </div>
    </ng-template>
</sqx-layout>
<router-outlet></router-outlet>
